<template>
	<div>
		<div class="mineAttention-box">
			<!--没有关注-->
			<div class="noatten-box" v-if="tipImg"></div>
			<div class="mineCollect-box-title">
				<div class="back" @click="mineAttentionBack"></div>
				<p>我的关注</p>
			</div>
			<ul class="mineAttention-box-ul" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
				infinite-scroll-distance="10">
				<li v-for="(v, index) of attentionList" :key="index">
					<img class="mineAttention-img" :src="v.headImage + '?x-oss-process=image/resize,m_fixed,h_100,w_100'" />
					<p class="mineAttention-name">{{ v.name }}</p>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
export default {
	components: {
	},
	data() {
		return {
			attentionList: [],
			tipImg: false,
			page: -1,
			busy: false,
			getPlatform: fun.getPlatform() //app wx
		}
	},
	created() {
		this.dotNumPage(); //页面打点
	},
	mounted() {
		this.$store.dispatch("hideNav");
	},
	methods: {
		loadMore() {
			this.busy = true;
			setTimeout(() => {
				this.page++;
				this.getGzList();
			}, 200);
		},
		dotNumPage() { //统计
			var argumentData = {
				sessionId: "mineAttention_page", //场次id
				streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
				actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
				playSource: fun.getPlatform(), //微信 app 游客为web
				url: window.location.href, //当前的url
			};
			this.$http.post("/h5live/recordData", argumentData, {
				headers: {
					"Content-Type": "application/json"
				}
			})
				.then(
					res => {
						//console.log(res)
					},
					err => {
						console.log(err);
					}
				);
		},
		getGzList() {
			this.$http.get('/h5live/myFollows').then(
				res => {
					if (res.data.code === '000000') {
						if (res.data.data.length) {
							this.busy = false;
							this.attentionList = [...this.attentionList, ...res.data.data];
							if (res.data.data.length < 10) {
								this.busy = true;
							}
						} else {
							if (this.attentionList.length == '0') {
								this.tipImg = true
							}
						}
					}
				},
				err => { }
			);
		},
		mineAttentionBack() {
			this.$router.push(`/${this.$channel}/mine`);
		}
	},
}
</script>

<style scoped="scoped" lang="less">
.mineAttention-box {
	width: 100%;
	height: 100%;
	background: white;
	overflow-y: scroll;

	.noatten-box {
		width: 323px;
		height: 183px;
		background: url(../../assets/images/noAttention.png) no-repeat;
		background-size: 323px 183px;
		position: absolute;
		top: 450px;
		left: 210px;
	}

	.mineCollect-box-title {
		position: relative;
		.back {
			width: 65px;
			height: 55px;
			background: url(../../assets/images/iconsmall.png) no-repeat;
			background-size: 150px 150px;
			position: absolute;
			top: 20px;
			left: 40px;
		}

		p {
			width: 100%;
			height: 80px;
			font-size: 36px;
			text-align: center;
			line-height: 80px;
			color: #333333;
		}
	}
	.mineAttention-box-ul {
	width: 100%;
	height: calc(100vh - 80px);
	overflow-y: scroll;

	li {
		width: 690px;
		height: 124px;
		background: rgba(255, 255, 255, 1);
		border-bottom: 2px solid #F3F3F3;
		margin: 0px 30px;
        padding: 0  36px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-right: 30px;

		.mineAttention-img {
			width: 100px;
			height: 100px;
			/*background: pink;*/
			border-radius: 10px;
			margin-right: 30px;
		}

		.mineAttention-name {
			text-align: left;
			font-size: 28px;
			font-weight: 700;
			color: #474747;
			max-width: 450px;
			height: 45px;
			line-height: 45px;
			padding-right: 30px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
}
</style>